<template>
  <div class="box">
    <div id="" style="margin-bottom: 30px;">
      <el-button :type="type=='数据导入'?'primary':''" v-has @click="type='数据导入'">数据导入</el-button>
      <el-button :type="type=='数据表关联组合'?'primary':''" v-has @click="type='数据表关联组合'">数据表关联组合</el-button>
      <el-button :type="type=='数据自动更新'?'primary':''" v-has @click="type='数据自动更新'">数据自动更新</el-button>
      <el-button :type="type=='数据分拣规则'?'primary':''" v-has @click="type='数据分拣规则'">数据分捡规则</el-button>
      <el-button :type="type=='数据目录'?'primary':''" v-has @click="type='数据目录'">数据目录</el-button>
      <el-button :type="type=='数据共享'?'primary':''" v-has @click="type='数据共享'">数据共享</el-button>
    </div>
    <template v-if="type=='数据导入'">
      <el-form ref="ruleForm" :model="formData" :inline="true" class="form" label-position="left" label-width="150px">
        <el-form-item label="文档地址:">
          <el-upload ref="uploads" class="upload-demo" drag accept=".xls,.xlsx" :auto-upload="false"
            :action="uploadFile" :headers="headers" :file-list="fileList" multiple>
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
    </template>
    <template v-if="type=='数据表关联组合'">
      <el-table :data="tableData" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title"
          align="center" />
      </el-table>
    </template>
    <template v-if="type=='数据自动更新'">
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center" />
      </el-table>
    </template>
    <template v-if="type=='数据分拣规则'">
      <el-form ref="ruleForm1" :model="ruleForm1" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="表分区数据">
              <el-input value="user" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="批量插入">
              <el-switch :value="true" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="字段名">
              <el-input value="user" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template v-if="type=='数据目录'">
      <el-form ref="ruleForm2" :model="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="字段名">
              <el-input value="doc" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据库">
              <el-input value="docsytem" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="行数">
              <el-input value="7" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="表类型">
              <el-input value="InnoDB" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="自动递增值">
              <el-input value="11" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="行格式">
              <el-input value="Compact" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建日期">
              <el-input :value="new Date().toLocaleDateString()" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="索引长度">
              <el-input value="1 bytes(0)" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数据长度">
              <el-input value="16.00KB(16384)" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div style="width: 500px;" v-if="type=='数据共享'">
      <el-table :data="Datas" border fit stripe highlight-current-row>
        <el-table-column v-for="item in Heads" :key="item.id" :label="item.label" :prop="item.title" align="center">
          <template v-slot="scope">
            <div v-if="item.title=='data'">
              {{ scope.row[item.title] }}
            </div>
            <div v-else>
              <el-checkbox v-model="scope.row[item.title]"></el-checkbox>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        Datas: [{
            data: 'Select',
            interface: true
          },
          {
            data: 'Insert',
            interface: false
          },
          {
            data: 'Update',
            interface: true
          },
          {
            data: 'Delete',
            interface: true
          },
          {
            data: 'Create',
            interface: false
          },
          {
            data: 'Drop',
            interface: false
          },
          {
            data: 'Grant',
            interface: false
          },
          {
            data: 'References',
            interface: false
          },
          {
            data: 'Index',
            interface: false
          },
        ],
        Heads: [{
            id: 1,
            label: "权限",
            title: "data",
          },
          {
            id: 2,
            label: "授予",
            title: "interface",
          }
        ],
        fileList: [],
        type: '数据导入',
        tableHead: [{
            id: 1,
            label: "数据库",
            title: "data",
          },
          {
            id: 2,
            label: "数据接口",
            title: "interface",
          },
          {
            id: 3,
            label: "数据链接信息",
            title: "dataLink",
          },
          {
            id: 4,
            label: "服务器地址",
            title: "url",
          },
          {
            id: 5,
            label: "数据库账号",
            title: "account",
          },
          {
            id: 6,
            label: "数据库密码",
            title: "password",
          }
        ],
        formData: {},
        tableData: [{
          data: 'sds-system',
          interface: 'get',
          dataLink: '/sys/sdfghujjuj',
          url: 'http://192.168.50.233',
          account: 'sds123456',
          password: '123456'
        }],
        tableData1: [{
          update: "每天",
          type: '整库更新',
          time: '12:00'
        }],
        tableHead1: [{
            id: 1,
            label: "更新周期",
            title: "update",
          },
          {
            id: 2,
            label: "更新类别",
            title: "type",
          },
          {
            id: 3,
            label: "更新规则",
            title: "time",
          }
        ]
      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
